<template>
    <div class="main">
      <div class="top">
        竞猜结果
      </div>
      <div class="body" style="text-align: center">
        <el-table
          :data="results"
          style="width: 100% ;height: 258px;"
          >
          <el-table-column
            prop="details"
            label="赛事"
            width="100px"
            >
          </el-table-column>
          <el-table-column
            prop="main"
            label="主队"
            width="96">
          </el-table-column>
          <el-table-column
            prop="guest"
            label="客队"
            width="96">
          </el-table-column>
          <el-table-column
            prop="results"
            label="输/赢"
            width="96">
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "results",
      data(){
          return{
            results:[]
          }
      },
      methods:{
        setDataFromAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/results", null, "post")
            .then(res => {
              this.results = res;
              console.log(res)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      created() {
        this.setDataFromAxios();
      }
    }
</script>

<style scoped lang="stylus">
  .main
    width 390px
    height 298px
    border 1px solid #999999
    margin-top 5px
    .top
      line-height 33px
      width:100%;
      height 33px
      border-bottom: 1px solid #02001f;
      font-size 20px
      font-weight: bold;
</style>
